Google Maps: Add Multiple Markers with Info box to Custom map

Question

Google Maps: Add Multiple Markers with Info box to Custom map

1.9k views Asked by user3116868 At 18 December 2013 at 22:32

hi i´m quite new to the topic and after a few hours trying i´m close to the goal, but not there i think i would need a little kick.

so far i was able to create a styled map and get 2 markers in position on the map. zoom and some other stuff is clear to me how to influence.

here is the code:

<html>
<head> 
<title> test map </title>

<style type="text/css">
        #map {
            width: 750px;
            height: 500px;
        }
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
<script type="text/javascript"> 
    google.maps.event.addDomListener(window, 'load', init);

    function init()
    {

    var mapOptions = {
        zoom: 2,
        panControl: true,
        zoomControl: true,
        center: new google.maps.LatLng(33.524385, -112.048899),
        // 
        styles: [
        {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 17}]}, {
            "featureType": "landscape",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 20}]}, {
            "featureType": "road.highway",
            "elementType": "geometry.fill",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 17}]}, {
            "featureType": "road.highway",
            "elementType": "geometry.stroke",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 29}, {
                "weight": 0.2}]}, {
            "featureType": "road.arterial",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 18}]}, {
            "featureType": "road.local",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 16}]}, {
            "featureType": "poi",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 21}]}, {
            "elementType": "labels.text.stroke",
            "stylers": [
            {
                "visibility": "on"}, {
                "color": "#000000"}, {
                "lightness": 16}]}, {
            "elementType": "labels.text.fill",
            "stylers": [
            {
                "saturation": 36}, {
                "color": "#000000"}, {
                "lightness": 40}]}, {
            "elementType": "labels.icon",
            "stylers": [
            {
                "visibility": "off"}]}, {
            "featureType": "transit",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 19}]}, {
            "featureType": "administrative",
            "elementType": "geometry.fill",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 20}]}, {
            "featureType": "administrative",
            "elementType": "geometry.stroke",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 17}, {
                "weight": 1.2}]}]
    };

    var mapElement = document.getElementById('map');

    var myMap = new google.maps.Map(mapElement, mapOptions);


    var pos = new google.maps.LatLng(33.524385, -12.048899);
    var poi_marker = new google.maps.Marker(
    {
        map: myMap,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: pos
    });

    var pos = new google.maps.LatLng(5.524385, -12.048899);
    var poi_marker = new google.maps.Marker(
    {
        map: myMap,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: pos



    });

} 
</script>
</head> 
<body>

<div id="map"> </div>
</body>
</html>

what works fine for me. i see the style i like plus 2 positions with the classic marker.

Map from code above Sample

then i looked a bit more around and found out that you can have info boxes with markers. i would like to add HTLM to those boxes for each marker i create.

the google rep. gives this example which works fine for me:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max?hl=en

i would like to add a couple of those to my map like i did on the 2 simple marker postions, but i honestly do not know where to place the code i see in the above link.

tried all kinds for the last 2h and now feed up. i do something wrong, as this should work.

the cherry on the candy would then, if someone would know, where to place the code for giving the Marker my own style. i have found some examples for that. so i would be cool to have it custom all the way.

thx for your help, ideas or whatever you contribute!

Original Q&A

There are 1 answers

**Matthew Paxman** · Answer 1 · 2013-12-19 01:07:18

You want the infobox to propogate when you click on the marker right? For this you'll need to set a listener that listens for each plotted marker to be clicked and then generate an infobox once it's done.

function infoBoxCreator() {

  var raInfoBoxElement = document.createElement('div');

  var infoBoxInfo = document.createElement('div');
  infoBoxInfo.className = 'infobox_content';
  infoBoxInfo.innerHTML = 'Text In My Infobox';

  raInfoBoxElement.appendChild(raNameElement);

  var infoBoxText = raInfoBoxElement;

  plotMarker(infoBoxText);
}


function plotMarker(infoBoxText) {

  var coordinate = new google.maps.LatLng(someLAT, someLONG);
  var infowindow = new google.maps.InfoWindow();

// Create the marker
  var marker = new google.maps.Marker({
    map: map,
    position: coordinate
  });

// Create Info window and destroy any other open infowindows
google.maps.event.addListener(marker, "click", function() {
    if (infowindow)
        infowindow.close();
    infowindow = new google.maps.InfoWindow({content: infoBoxText});
    infowindow.open(map, marker);
});

EDIT: By marker style do you mean custom icons? In google.maps.Marker just put in icon: new google.maps.MarkerImage(FILEPATH) and then the file path to the image you'd like to use as the custom marker.

EDIT 2: Still early in the morning. I forgotvar infowindow = new google.maps.InfoWindow(); I've added it in now.

EDIT 3: In the map with the infoboxes already working, just make your mapOptions look like this:

var mapOptions = {
    center: new google.maps.LatLng(37.276087947677254, -12.048898999999995),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]}],
    streetViewControl: false
};

That's got it working for me.

TechQA.

Google Maps: Add Multiple Markers with Info box to Custom map

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in GOOGLE-MAPS-API-3

Related Questions in INFOBOX

Popular Questions

Popular Tags

Trending Questions