2016-11-09 32 views
1

Ich habe ein Problem.Ich implementiere die Google Map auf meiner Webseite mit Javascript. Hier ist mein Problem, Karte kommt mit , aber sein Hintergrundbild zeigt überhaupt nicht. Der Screenshot ist unten angegeben.Google Karte Hintergrundbild zeigt nicht richtig im Browser

enter image description here

Ich erkläre unter meinem Code.

<div id="dvMap" style="width:1000px; height:1000px;"></div> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 



<script> 
    var markers = [{"lat":"20.295728","lng":"85.844990"},{"title":"shilparamam","lat":"20.295728","lng":"85.844990","description":"Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra."}]; 
    window.onload = function() { 
    var mapOptions = { 
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
    var infoWindow = new google.maps.InfoWindow(); 
    var lat_lng = new Array(); 
    var latlngbounds = new google.maps.LatLngBounds(); 
    for (i = 0; i < markers.length; i++) { 
    var data = markers[i] 
    var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
    lat_lng.push(myLatlng); 
    var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: data.title 
    }); 
    latlngbounds.extend(marker.position); 
    (function (marker, data) { 
    google.maps.event.addListener(marker, "click", function (e) { 
    infoWindow.setContent(data.description); 
    infoWindow.open(map, marker); 
    }); 
    })(marker, data); 
    } 
    map.setCenter(latlngbounds.getCenter()); 
    map.fitBounds(latlngbounds); 
    } 
    </script> 

Hier brauche ich das klare Hintergrundbild für die Google Map. Bitte hilf mir.

+0

Der postierte Code funktioniert für mich. ([Geige] (https://jsfiddle.net/geocodezip/w8nbhuos/)). Bitte geben Sie eine [mcve] an, die das Problem veranschaulicht. – geocodezip

+0

@geocodezip: Ja, ich habe den benötigten Teil von meinem ganzen Code gepostet. Individuell funktioniert es gut Ich kann nicht wissen, warum es nicht in meinem Projekt funktioniert. – satya

+0

Es ist schwer, ohne eine [mcve] zu helfen, die das Problem demonstriert. – geocodezip

Antwort

1

Warum verwenden Sie nicht einen einfachen iframe anstelle eines so langen Skripts? Unter dem folgenden Link finden Sie einfache Schritte, um einen iFrame-Code zu erhalten, den Sie nur mit html div in Ihr Projekt oder Ihre Website einbetten müssen. http://www.dummies.com/web-design-development/site-development/how-to-embed-a-google-map-with-iframe/

+0

Wo ist der Beispielcode? – satya

+1

Klicken Sie auf diesen Link [link] (https://www.google.co.in/maps/@12.9539974,77.6309395,11z?hl=de) und geben Sie Ihre Adresse in das Suchfeld ein. Drücken Sie die Eingabetaste. Sie erhalten jetzt eine Google Map für Ihre Adresse. Klicken Sie auf die Freigabeoption auf der linken Seite und wählen Sie die 2. Registerkarte ** Karte einbetten **, kopieren Sie dann den von Ihnen bereitgestellten iframe-Link und binden Sie ihn in Ihr HTML-div Ihres Projekts ein. Zum Beispiel erhalten Sie etwas wie folgt:

+0

Hier brauche ich keine Karte für ein bestimmter Ort. Ich brauche den Standort auf der Karte nach 'latitude and longitide' Wert, der dynamisch zugewiesen werden kann. – satya

Verwandte Themen