user6856823
user6856823

Reputation:

Marker icon colors on map are not showing also i want to add title on my map

I am working on asp.net MVC 5 I have added a Google api v3 map into my project

I have added different icon colors for my markers but they are not visible, just only red standard icon

Bellow i have included this

<script src="http://maps.google.com/maps/api/js?key=MY_KEY"></script>

After that i have placed a div

<div id="map" style="width: 320px; height: 350px;margin-top:-400px "></div>

After that my script starts

<script>    
    //Map initialization
// Define your locations: HTML content for the info window, latitude, longitude
var locations =
[
    ['<h4>Meter# 11111111<h4>', 31.27045, 74.17811],
    ['<h4>Meter# 22222222<h4>', 31.26972, 74.17855],
    ['<h4>Meter# 33333333<h4>', 31.27081, 74.17964],
    ['<h4>Meter# 44444444<h4>', 31.27007, 74.18037],
    ['<h4>Meter# 55555555<h4>', 31.26956, 74.18123],
];

// Info Window Content
var infoWindowContent =
[

    //1
    ['<div class="info_content">' +
     '<h4>Meter# 11111111</h4>' +
     '<h4><b>Description</b></h4>'+
     '<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
     '<h4><b>Coordinates:</b></h4>'+
     '<p>31.27045, 74.17811</p>'+ '</div>'
    ],
    //2
    ['<div class="info_content">' +
     '<h4>Meter# 22222222</h4>' +
     '<h4><b>Description</b></h4>' +
     '<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
     '<h4><b>Coordinates:</b></h4s>' +
     '<p>31.26972, 74.17855</p>' + '</div>'
    ],
    //3
    ['<div class="info_content">' +
     '<h4>Meter# 33333333</h4>' +
     '<h4><b>Description</b></h4>' +
     '<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
     '<h4><b>Coordinates:</b></h4>' +
     '<p>31.27081, 74.17964</p>' + '</div>'
    ],
    //4
    ['<div class="info_content">' +
     '<h4>Meter# 44444444</h4>' +
     '<h4><b>Description</b></h4>' +
     '<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
     '<h4><b>Coordinates:</b></h4>' +
     '<p>31.27007, 74.18037</p>' + '</div>'
    ],
     //5
    ['<div class="info_content">' +
     '<h4>Meter# 55555555</h4>' +
     '<h4><b>Description</b></h4>' +
     '<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
     '<h4><b>Coordinates:</b></h4>' +
     '<p>31.26956, 74.18123</p>' + '</div>'
    ],
];



// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

var icons = [
  iconURLPrefix + 'red-dot.png',
  iconURLPrefix + 'green-dot.png',
  iconURLPrefix + 'blue-dot.png',
  iconURLPrefix + 'orange-dot.png',
  //iconURLPrefix + 'purple-dot.png',
  //iconURLPrefix + 'pink-dot.png',
  iconURLPrefix + 'yellow-dot.png'
]

var iconsLength = icons.length;

var map = new google.maps.Map(document.getElementById('map'), {

    zoom: 10,
    center: new google.maps.LatLng(31.27016, 74.17932),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    panControl: false,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
    }
});

var infoWindow = new google.maps.InfoWindow();


var markers = new Array();

var iconCounter = 0;

// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {  
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: icons[iconCounter]
    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

    google.maps.event.addListener(map, "click", function (event) {
        infoWindow.close();
    });

    // We only have a limited number of possible icon colors, so we may have to restart the counter
    if (iconCounter >= iconsLength) {
        iconCounter = 0;
    }
}

function autoCenter() {
    //  Create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds();
    //  Go through each...
    for (var i = 0; i < markers.length; i++) {
        bounds.extend(markers[i].position);
    }
    //  Fit these bounds to the map
    map.fitBounds(bounds);
}
autoCenter();

</script>

Also i want to give my map a title which will look alike this

Update

Please see this i have added title into my map

var map = new google.maps.Map(document.getElementById('map'), {

    zoom: 10,
    center: new google.maps.LatLng(31.27016, 74.17932),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    panControl: false,
    title: 'Power Monitoring Solutions',
    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_BOTTOM
    }
});

And still i get

this

Any help would be highly appreciated

Upvotes: 0

Views: 135

Answers (1)

Maths RkBala
Maths RkBala

Reputation: 2195

You forgot to the increment the iconCounter value :-)

So Please Change:

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: icons[iconCounter]
    });

Into

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: icons[iconCounter]
    });
iconCounter++;

For Title

Please change

var locations =
[
    ['<h4>Meter# 11111111<h4>', 31.27045, 74.17811],
    ['<h4>Meter# 22222222<h4>', 31.26972, 74.17855],
    ['<h4>Meter# 33333333<h4>', 31.27081, 74.17964],
    ['<h4>Meter# 44444444<h4>', 31.27007, 74.18037],
    ['<h4>Meter# 55555555<h4>', 31.26956, 74.18123],
];


var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: icons[iconCounter]
});

Into

var locations =
[
    ['<h4>Meter# 11111111<h4>', 31.27045, 74.17811,'title1'],
    ['<h4>Meter# 22222222<h4>', 31.26972, 74.17855,'title2'],
    ['<h4>Meter# 33333333<h4>', 31.27081, 74.17964,'title3'],
    ['<h4>Meter# 44444444<h4>', 31.27007, 74.18037,'title4'],
    ['<h4>Meter# 55555555<h4>', 31.26956, 74.18123,'title5']
];

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    title:locations[i][3], //title
    icon: icons[iconCounter]
});
iconCounter++;

Upvotes: 1

Related Questions