Настройка карты google с несколькими маркерами и информационным окном

* Привет, я новичок во всей карте Google api, поэтому, пожалуйста, проводите меня.Настройка карты google с несколькими маркерами и информационным окном

То, что я пытаюсь достичь ниже, - извлечь данные из файла XML или JSON-файла и выстроить их на карту Google. Я также пытаюсь добавить информационное окно, в котором будет отображаться различная информация для каждого местоположения. Я понимаю, что для того, чтобы иметь информационное окно, мне нужно было бы создать более простой. Но вопрос в том, как я на самом деле пометить несколько информационных окон их маркерами?

Все маркеры отображаются на карте хорошо, но проблема в том, когда я нажимаю, чтобы увидеть информационное окно - информационное окно всегда отображается на том же маркере. В чем проблема?

Это то, к чему я придумал, и я был бы очень признателен, если кто-нибудь сможет определить проблему.

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     html, body, #map_canvas { margin: 0; padding: 0; height: 100%; } 
    </style> 
    <script 
     src="https://maps.googleapis.com/maps/api/js sensor=false&libraries=visualization"> 
    </script> 

    <script> 
    var map; 
    function initialize() { 
    var mapOptions = { 
    zoom: 5, 
    center: new google.maps.LatLng(-27.48939, 153.012772), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map_canvas'), 
    mapOptions); 


    var script = document.createElement('script'); 
    script.src = 'http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week'; 
    document.getElementsByTagName('head')[0].appendChild(script); 
} 

    window.eqfeed_callback = function(results) { 
    for (var i = 0; i < results.features.length; i++) { 


    var earthquake = results.features[i]; 
    var coords = earthquake.geometry.coordinates; 

    var latLng = new google.maps.LatLng(coords[1],coords[0]); 

    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 

    }); 

    var infowindow = new google.maps.InfoWindow({ 
    content: "<div>Hello! World</div>", 
    maxWidth:100 
    }); 

    google.maps.event.addListener(marker, "mouseover", function() { 
    infowindow.open(map, marker); 
}); 

    } 
} 

    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas"></div> 
    </body> 

    </html>

источник

2013-08-17 user2691544

Возникли вопросы? Когда нет, http://codereview.stackexchange.com было бы лучшим местом для публикации этого сообщения. –

Возможный дубликат [API JS API для Google Maps v3 - Пример простого множественного маркера] (http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) – geocodezip

Используйте это вместо маркера, при открытии InfoWindow.

google.maps.event.addListener(marker, "mouseover", function() { 
     infowindow.open(map, this); 
    });

источник

2013-08-17 11:34:11

Привет, Лукас Спасибо за совет. Просто, чтобы проверить с вами, откуда мой контент будет тянуть сейчас? Что мне делать, если я хочу вытащить контент из внешнего источника, такого как XML или JSON? – user2691544

Все остается как было. Вы можете сделать это так же, как и раньше. –

hmm. в этом случае он, похоже, не работает. Функция информационного окна исчезла. – user2691544

Настройка карты google с несколькими маркерами и информационным окном

ответ

Смежные вопросы