CODEWITHSUNDEEP
phphtmlgoogle-maps
Meghna
Meghna

Reputation: 69

How to display Custom Markers with Google Maps api to generate static map image

I have a code of generate map image using Google map api display below : 

<img src="https://maps.googleapis.com/maps/api/staticmap?center='<?php echo $madd; ?>'&zoom=7&size=700x300&markers=icon:http://chart.apis.google.com/chart?chst=d_map_pin_icon%26chld=medical%7Clabel:'<?php echo $mlabel; ?>'"/>

Using above code display here google red marker icon but I want to display custom marker icon. Please help me.

Upvotes: 0

Views: 1785

Answers (3)

Ozkan
Ozkan

Reputation: 1

You can simply use this PHP script. It is free and has lots of features. With it, you can manage your maps without even one line coding.

Upvotes: 0

Sagar Patel
Sagar Patel

Reputation: 461

You can try this one i think this one being helpful to you

http://maps.google.com/maps/api/staticmap?center=21.19365498864821,72.8217601776123&size=200x200&zoom=12&maptype=roadmap&markers=icon:%20http://ijiya.com/images/marker-images/image.png|shadow:true|21.19365498864821,72.8217601776123&sensor=false&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC365hfg5yrjskd999

Upvotes: 1

DoO37
DoO37

Reputation: 5

You can simply achieve it using java-script

var image = '../images/pin.png';
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'YOUR MARKER TITLE',
    icon:image
});

where image is your custom marker PNG image,
So your Java-Script code should look like this

var options = {
    mapTypeControlOptions: {
        mapTypeIds: ['Styled']
    },
    center: new google.maps.LatLng(30.085100, 31.328230),
    zoom: 16,
    disableDefaultUI: true,
    mapTypeId: 'Styled'
};
var div = document.getElementById('surabaya');
var map = new google.maps.Map(div, options);
var myLatLng = { lat: 30.085100, lng: 31.328230 };
var image = '../structure/static/pin.png';
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'PMAS',
    icon:image
});
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
};

Upvotes: 0

Related Questions